<template>
  <view class="_item_building">
    <view class="u-p-l-32 u-p-r-32 ">
      <view class="u-flex u-flex-between u-flex-items-center">
        <view class="f-s-16 f-w-b u-m-r-40 u-line-1">{{data.apartName}}</view>
        <view class="inde">
          <up-icon name="map-fill" color="#7f7f7f" :size="14"></up-icon>
          <view class="posSty"> {{data.address}}</view>
        </view>

        <!-- <up-icon name="arrow-right" color="#1677FF" :size="18"></up-icon> -->
        <!-- <status-tag :status="info.status"></status-tag> -->
      </view>

      <!-- <view class=" infoCardFu"> -->
      <view class="u-flex infoCard">

        <view class="car2">
          <view class="titSty">
            公寓楼层
          </view>
          <view class="titSty1" style="margin-top: -30rpx;">
            {{data.floors}} 层
          </view>
          <view class="xoe"></view>
        </view>

        <view class="car1">
          <view class="titSty">
            房间数
          </view>
          <view class="titSty1">
            {{data.rooms}} 间
          </view>
        </view>

        <view class="car1">
          <view class="titSty">
            常住人口
          </view>
          <view class="titSty1">
            {{data.populations}} 人
          </view>
        </view>

      </view>




      <view class="u-flex infoCard">

        <view class="car2">
          <view class="titSty">
            营业场所
          </view>
          <view class="titSty1" style="margin-top: -30rpx;">
            {{data.business}} 家
          </view>
          <view class="xoe"></view>
        </view>

        <view class="car1">
          <view class="titSty">
            车辆总数
          </view>
          <view class="titSty1">
            {{data.cars}} 辆
          </view>
        </view>


        <view class="car1">
          <view class="titSty">
            警情数
          </view>
          <view class="titSty1" style="color:#f6931e ">
            {{data.handings}} 件
          </view>
        </view>
      </view>

      <!-- </view> -->


    </view>
    <up-line margin="24rpx 0 "></up-line>
    <view class="u-flex u-flex-end u-flex-items-center u-p-l-32 u-p-r-32" >
      <view >
<!--        <up-button text="楼宇详情" :customStyle="{-->
<!--					width: '150rpx',-->
<!--					height: '56rpx',-->
<!--					background: '#fff',-->
<!--					borderRadius: '8rpx',-->
<!--					fontSize: '28rpx',-->
<!--					color: '#000000'-->
<!--				}" @click="toBuildingData"></up-button>-->


        <up-button text="公寓详情" :customStyle="{
					width: '150rpx',
					height: '56rpx',
					background: '#1677FF',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: '#FFFFFF'
				}" @click="toBuildingInfo"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
const toBuildingInfo = ()=>{
  // console.log('4444444444')
  // console.log(props.data)
  uni.navigateTo({
    url: '/subPackages/apartment/clist?id='+props.data.id+'&name='+props.data.apartName+'&info='+JSON.stringify(props.data) ,
  })
}
const props = defineProps({
  data: Object,
})
const toBuildingData = ()=>{
  uni.navigateTo({
    url: '/subPackages/building/info?id='+props.data.id+'&name='+props.data.apartName,
  })
}
// export default {
// 	name: "BuidingItem",
// 	data() {
// 		return {
//
// 		};
// 	}
// }
</script>

<style lang="scss" scoped>
._item_building {

  background: #FFFFFF;
  box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  padding: 32rpx 0;
  margin-bottom: 24rpx;

  ._title {
    min-width: 144rpx;
    width: 144rpx;
  }

}

.posSty {
  color: #7f7f7f;
  display: flex;
  font-size: 24rpx;
  margin-left: 5rpx;
}

.infoCard {
  // padding: 32rpx;
  // width: 620rpx;
  margin-top: 20rpx;
  background-color: #f5f5f5;
  height: 140rpx;
  display: flex;
  // margin-left: 32rpx;
}

.titSty {
  color: gray;
  text-align: center;
  font-size: 28rpx;
}

.titSty1 {
  font-size: 28rpx;
  color: #111;
  text-align: center;
}

.car1 {
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30rpx;

}
.car2 {
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30rpx;
  // border-right: 1rpx solid #7f7f7f;
}
.xoe{
  // position: absolute;
  border-right: 1rpx solid #adadad;
  margin-top: -105rpx;
  right: 0;
  height: 70rpx;
  width: 120%;
}
.inde{
  display: flex;
  flex-direction: row;
}
</style>
